<template>
  <view class="content">
    <view class="uni-margin-wrap">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image
            class="swiperImg"
            :src="item.imgUrl"
            mode="scaleToFill"
            show-menu-by-longpress
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- tabs标签页 -->
    <view class="tabs">
      <view
        class="tab_item"
        :class="{ cur: index === tabCur }"
        v-for="(item, index) in ['购票', '我的票据']"
        :key="index"
        @click="tabSelect(index)"
        >{{ item }}</view
      >
    </view>
    <view>
      <uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
        <uni-forms-item label="学员姓名" required name="studentName">
          <uni-easyinput
            v-model="valiFormData.studentName"
            placeholder="请输入姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="手机号" required name="phone">
          <uni-easyinput
            v-model="valiFormData.phone"
            type="number"
            placeholder="请输入手机号"
          />
        </uni-forms-item>
<!--        <uni-forms-item-->
<!--          label="演出曲目"-->
<!--          required-->
<!--          name="performanceTypeId"-->
<!--          v-if="tabCur === 0"-->
<!--        >-->
<!--          <uni-data-picker-->
<!--            class="uniSelect"-->
<!--            :localdata="dataTree"-->
<!--            v-model="valiFormData.performanceTypeId"-->
<!--            popup-title="请选择演出曲目"-->
<!--            placeholder="请选择演出曲目"-->
<!--            @change="onchange"-->
<!--          >-->
<!--          </uni-data-picker>-->
<!--        </uni-forms-item>-->
        <!-- <uni-forms-item label="自我介绍" name="introduction">
					<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
				</uni-forms-item> -->
      </uni-forms>
      <button type="primary" @click="submit('valiForm')">提交</button>
    </view>
  </view>
</template>

<script>
// import {uniForms} from '@dcloudio/uni-ui'
export default {
  data() {
    return {
      noSubmitStr: "",
      tabCur: 0, // 当前tabs下标
      dataTree: [],
      title: "Hello",
      indicatorDots: false,
      autoplay: true,
      interval: 2000,
      duration: 500,
      bannerList: [{ imgUrl: "/static/yinyue.jpg" }],
      // 校验表单数据
      valiFormData: {
        studentName: "",
        phone: "",
        // performanceTypeId: "",
      },
      // 校验规则
      rules: {
        studentName: {
          rules: [
            {
              required: true,
              errorMessage: "姓名不能为空",
            },
          ],
        },
        phone: {
          rules: [
            {
              required: true,
              errorMessage: "手机号不能为空",
            },
            {
              format: "number",
              errorMessage: "手机号只能输入数字",
            },
            {
              validateFunction: function (rule, value, data, callback) {
                // 判断手机号是否符合规范
                if (
                  !/^1(3|4|5|7|8)\d{9}$/.test(value) ||
                  !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(value)
                ) {
                  callback("手机号不合法");
                }
                return true;
              },
            },
          ],
        },
        // performanceTypeId: {
        //   // rules
        //   rules: [
        //     {
        //       required: true,
        //       errorMessage: "演出曲目不能为空",
        //     },
        //   ],
        // },
      },
    };
  },
  components: {
    // uniForms
  },
  onLoad() {
    this.valiFormData = {
      studentName: "",
      phone: "",
      // performanceTypeId: "",
    };
    // this.request.get()
    // this.$apis.performanceTypeSelector().then(res => {
    //
    // })
    // uni.request({
    //   url: "/roland-api/home/performanceSelector",
    //   data: {},
    //   dataType: "json",
    //   header: {
    //     Accept: "application/json",
    //     "Content-Type": "application/json; charset=utf-8",
    //   },
    //   // responseType: 'arraybuffer',
    //   success: (res) => {
    //     //
    //     const data = res.data;
    //     if (data.code !== 0) {
    //       uni.showToast({
    //         title: data.msg,
    //         duration: 3000,
    //         icon: "none",
    //       });
    //     } else {
    //       const quData = res.data.data || [];
    //       this.dataTree = (quData || []).map((item) => ({
    //         text: item.performanceType,
    //         value: item.id,
    //       }));
    //     }
    //   },
    // });
    uni.request({
      url: "/roland-api/home/isOpening",
      data: {},
      dataType: "json",
      header: {
        Accept: "application/json",
        "Content-Type": "application/json; charset=utf-8",
      },
      // responseType: 'arraybuffer',
      success: (res) => {
        const data = res.data;
        this.noSubmitStr = data.data;
        console.log(this.noSubmitStr)
        if (this.noSubmitStr) {
          uni.showToast({
            title: this.noSubmitStr,
            duration: 3000,
            icon: "none",
          });
        }
      },
    });
  },
  methods: {
    // tab切换
    tabSelect(index) {
      if (this.tabCur === index) return;
      this.tabCur = index;
    },
    onchange(e) {},
    submit(ref) {
      // uni.navigateTo({
      //   url: `/pages/checkSeat/index?performanceTypeId=${1}&buyNum=${3}&customerId=${
      //     3
      //   }`, //跳转地址
      // });
      // return
      if (this.noSubmitStr) {
        uni.showToast({
          title: this.noSubmitStr,
          duration: 3000,
          icon: "none",
        });
        return;
      }
      this.$refs[ref]
        .validate()
        .then((res) => {
          const { studentName = "", phone = "" } = res;
          switch (this.tabCur) {
            case 0:
              uni.request({
                url: "/roland-api/home/register",
                data: { ...res },
                method: "POST",
                dataType: "json",
                header: {
                  Accept: "application/json",
                  "Content-Type": "application/json; charset=utf-8",
                },
                // responseType: 'arraybuffer',
                success: (resDone) => {
                  const data = resDone.data;
                  if (data.code !== 0) {
                    uni.showToast({
                      title: data.msg,
                      duration: 3000,
                      icon: "none",
                    });
                  } else {
                    uni.showToast({
                      title: "提交成功",
                      duration: 2000,
                    });
                    // uni.navigateTo({
                    //   url: `/pages/choose/index?performanceTypeId=${
                    //     res?.performanceTypeId ?? null
                    //   }&buyNum=${data?.data?.buyNum ?? null}&customerId=${
                    //     data?.data?.customerId ?? null
                    //   }`, //跳转地址
                    // });
                    uni.navigateTo({
                      url: `/pages/checkSeat/index?phone=${res?.phone ?? null}&buyNum=${data?.data?.buyNum ?? null}&customerId=${
                        data?.data?.customerId ?? null
                      }`, //跳转地址
                    });
                    this.valiFormData = {
                      studentName: "",
                      phone: "",
                      // performanceTypeId: "",
                    };
                  }
                },
              });
              break;
            case 1: // 我的票据
              uni.navigateTo({
                url: `/pages/ticketList/index?studentName=${studentName}&phone=${phone}`, //跳转地址
              });
              break;
            default:
              break;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped lang="scss">
// .uniSelect{
.placeholder {
  font-size: 0rpx !important;
}
// }
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.uni-margin-wrap {
  width: 800rpx;
  width: 100%;
}
.swiper {
  height: 374rpx;
}
.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
}
.swiperImg {
  width: 100%;
  height: 100%;
}
.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.tabs {
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: 32rpx;
  background-color: #fff;
  color: #a9a9a9;
}

.tab_item {
  height: 114rpx;
  line-height: 100rpx;

  &.cur {
    position: relative;
    color: #007aff;

    &::after {
      content: "";
      width: 36rpx;
      height: 6rpx;
      position: absolute;
      bottom: 20rpx;
      left: 50%;
      margin-left: -18rpx;
      background-color: #007aff;
    }
  }
}
</style>
